<template>
  <div class="">
    <Header></Header>
    <div class="w1200 flex contentBox mt30  radius20">
      <div class="ft16 leftBox pt30 bgWhite radius20">
        <RouterLink  :to="item.page"  class="py20 block items ft16" v-for="(item, i) in listLeft" :key="i"
          :class="activePath==item.page? 'activeRouter' : ''">{{ item.name }}</RouterLink>
      </div>
      <div class="flex1 bgWhite ml30 radius20 p30">
        <div>当前位置主贷</div>
       <RouterView />
      </div>
    </div>
  </div>

</template>
<script setup> 
import Header from '@/layouts/Header/page_header.vue'
import {watch,ref,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
const route = useRoute()
const router = useRouter()

// 打印query参数
console.log(route.path); // Eve
console.log(route.query.age);  // 18
const activePath = ref('info')
const listLeft = [
  {
    name: '个人',
    page: "info"
  },
  {
    name: "钱包",
    page: "walleat"
  }
]
watch(()=>route.meta.active,(newValue,oldValue)=>{
  activePath.value = newValue
})
onMounted(()=>{
  activePath.value = route.meta.active
})
</script>
<style lang="scss" scoped>
.contentBox {
  min-height: 900px;

  .leftBox {
    width: 270px;
    border-right: 1px solid #eeeeee;
  }

  .items {
    padding-left: 24px;
    border-left: 4px solid #ffffff;

  }
}
.activeRouter{
  background-color: red;
}
</style>
